import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

List<Widget> drawList = [
  ListItem(
      icon: FaIcon(
        FontAwesomeIcons.tshirt,
        size: 20,
      ),
      title: '个性换肤',
      end: Text(
        '官方黄',
        style: TextStyle(color: Colors.grey),
      )),
  ListItem(
    icon: FaIcon(
      FontAwesomeIcons.crown,
      size: 20,
    ),
    title: '会员专区',
  ),
  ListItem(
    icon: Icon(
      Icons.work,
    ),
    title: '免流量畅听',
  ),
  Padding(padding: EdgeInsets.only(bottom: 10)),
  ListItem(
    icon: FaIcon(
      FontAwesomeIcons.clock,
    ),
    title: '睡眠定时',
  ),
  ListItem(
    icon: FaIcon(
      FontAwesomeIcons.music,
      size: 20,
    ),
    title: '听歌识曲',
  ),
  ListItem(
    icon: FaIcon(
      FontAwesomeIcons.wifi,
      size: 18,
    ),
    title: '仅WiFi联网',
  ),
];

class IndexDrawer extends StatelessWidget {
  const IndexDrawer({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double top = MediaQuery.of(context).padding.top;
    return Drawer(
      child: SafeArea(
        top: false,
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.only(top: top),
              height: top + 80,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('static/images/header_bg2.jpeg'),
                      fit: BoxFit.fill)),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    margin: EdgeInsets.only(left: 10, right: 10),
                    width: 50,
                    height: 50,
                    child: CircleAvatar(
                      backgroundImage: AssetImage('static/images/avator2.jpg'),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      height: 50,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Text(
                            '老铁666',
                            style: TextStyle(color: Colors.white, fontSize: 16),
                          ),
                          Text(
                            '累计听歌：9999首',
                            style: TextStyle(color: Colors.white, fontSize: 12),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Icon(Icons.email_outlined,
                        color: Colors.white, size: 26),
                  )
                ],
              ),
            ),
            Expanded(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                child: MediaQuery.removePadding(
                  context: context,
                  removeTop: true,
                  child: ListView(
                    physics: NeverScrollableScrollPhysics(),
                    children: drawList,
                  ),
                ),
              ),
            ),
            Row(
              children: [
                Expanded(
                  child: FlatButton.icon(
                    label: Text(
                      '设置',
                      style: TextStyle(color: Colors.grey),
                    ),
                    onPressed: () {},
                    icon: Icon(Icons.settings, color: Colors.grey),
                  ),
                ),
                Expanded(
                  child: FlatButton.icon(
                    label: Text(
                      '退出账号/关闭',
                      style: TextStyle(color: Colors.grey),
                    ),
                    onPressed: () {},
                    icon: Icon(Icons.logout, color: Colors.grey),
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

class ListItem extends StatelessWidget {
  const ListItem({
    Key key,
    this.icon,
    this.title,
    this.end,
  }) : super(key: key);

  final Widget icon;
  final Widget end;
  final String title;

  @override
  Widget build(BuildContext context) {
    List<Widget> list = [
      Container(
        width: 30,
        child: icon,
        alignment: Alignment.centerLeft,
      ),
      Padding(
        padding: EdgeInsets.only(left: 10),
      ),
      Expanded(child: Text(title)),
      Padding(
        padding: EdgeInsets.only(left: 10),
      )
    ];
    if (end != null) {
      list.add(end);
    }
    return DefaultTextStyle(
      style: TextStyle(color: Color(0xff333333)),
      child: Container(
        height: 30,
        child: Row(
          children: list,
        ),
      ),
    );
  }
}
